<template>
  <div>
    <h1 align="center">门店列表</h1>
    门店:
    <select v-model="state.mid">
            <option value="">全部</option>
            <option  :value="item.mid" v-for="item in likuhu">{{item.m_name}}</option>
          </select>
    房型:
    <select v-model="state.xid">
            <option value="">全部</option>
            <option  :value="item.xid" v-for="item in listkku">{{item.x_name}}</option>
          </select>
    <input type="button" value="查询" @click="Show">
    <input type="button" value="房号录入" @click="zeng">
    <table class="table table-bordered">
      <tr>
        <td>房间号</td>
        <td>门店名称</td>
        <td>房型名称</td>
        <td>门店图片</td>
        <td>房型图片</td>
        <td>入住时间</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{item.f_hao}}</td>
        <td>{{item.m_name}}</td>
        <td>{{item.x_name}}</td>
        <td>
          <img :src="'https://localhost:7099'+item.m_photot" height="60" width="60">
        </td>
        <td>
          <img :src="'https://localhost:7099'+item.x_photot" height="60" width="60">
        </td>
        <td>{{item.x_date.substr(0,10)}}</td>
        <td>{{item.f_sate==1?'上架':'下架'}}</td>
        <td>
          <input type="button" value="删除" @click="okdel(item.fid)">
          <input type="button" value="上架" @click="oksate(item.fid,item.f_sate)">
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
let data: any = reactive({
  state: {
    mid:0,
    xid:0,
  },
  list:[],
  likuhu:[],
  listkku:[],
});
let { state,list,likuhu,listkku} = toRefs(data);


//状态
const oksate=(fid:any,sate:any)=>{
   if (sate==1) {
    sate=0
   }
   else
   {
    sate=1
   }
   let obj = {
    fid:fid,
    sate:sate
   }
   axios({
     url:'/api/Member/fangsate',
     method:'get',
     params:obj
   })
   .then(res=>{
    console.log(res)
    if (res.data.data==1) {
      Show();
    }else{
      alert("失败了");
      return;
    }
   })
   .catch(err=>{
    console.log(err)
   })
}

//移除
const okdel=(fid:any)=>{
  if (confirm("确定要移除吗?"))
  {
    let obj ={
    fid:fid
  }
  axios({
     url:'/api/Member/delshan',
     method:'get',
     params:obj
   })
   .then(res=>{
    console.log(res)
    if (res.data.data==1) {
      alert("移除成功");
      Show();
      return;
    }else{
      alert("失败了");
      return;
    }
   })
   .catch(err=>{
    console.log(err)
   })
  }
}



onMounted(()=>{
  Show();
  getmdian();
  getfangxing();
})



//获取门店
const getmdian=()=>{
    axios({
      url:'/api/Member/m_Memdianmesses',
      method:'get'
    })
    .then(res=>{
      console.log(res);
      likuhu.value=res.data.data
    })
    .catch(err=>{
      console.log(err)
    })
}
//获取房型
const getfangxing=()=>{
    axios({
      url:'/api/Member/x_Fangxings',
      method:'get'
    })
    .then(res=>{
      console.log(res);
      listkku.value=res.data.data
    })
    .catch(err=>{
      console.log(err)
    })
}
//新增
const zeng=()=>{
  router.push("/fadd")
}
//门店显示
const Show = () => {
  let obj = {
    mid:state.value.mid,
    xid:state.value.xid,
  };
  axios({
    url: '/api/Member/GetQueryable',
    method: 'get',
    params: obj
  })
    .then((res) => {
      console.log(res);
      list.value=res.data.data
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
